<template>
  <div class="adivice-info">
    <div class="search-content">
      <Col class="panel search-panel" :span="24" style="padding:12px;">
      <Button type="primary" icon="md-arrow-back" @click="backToCompany">返回上一页</Button>
      <Breadcrumb style="display:inline-block;line-height: 36px;margin-left: 15px;">
        <BreadcrumbItem to="/user/video">热成像监控</BreadcrumbItem>
        <BreadcrumbItem>热力分布</BreadcrumbItem>
      </Breadcrumb>
      </Col>
    </div>
    <Col class="panel tab-panel adevice-tab-panel" :span="24">
    <Tabs style="height: 100%;" :animated="false" :value="tabCurrentName" @on-click="tabBeClick">
      <TabPane label="实时视频" name="first" style="height:100%;">
        <realTime :id="id" v-if="tabCurrentName=='first'" :type="1" />
      </TabPane>
      <TabPane label="历史记录" name="second" style="height:100%;" v-if="haikang">
        <History :id="id" v-if="tabCurrentName=='second'" />
      </TabPane>
    </Tabs>
    </Col>
  </div>
</template>
<script>
import { getVideoParams } from '@/api'
import realTime from './components/realTime'
import History from './components/History'
export default {
  // props: ['id'],
  components: {
    realTime,
    History
  },
  data() {
    return {
      tabCurrentName: 'first',
      haikang: false,
      id: ''
    }
  },
  mounted() {
    const { params } = this.$route
    this.id = params.id
    this.initData()
  },

  methods: {
    tabBeClick(name) {
      this.tabCurrentName = name
    },
    initData() {
      if (!this.id) return false
      const params = { id: this.id }
      getVideoParams(params).then(res => {
        this.baseInfo = res.data.base
        const { deviceNo, heatDirectStream, videoDirectStream } = this.baseInfo
        if (this.type === 1) {
          if (deviceNo.startsWith('dl')) {
            // this.src = heatDirectStream
          } else if (deviceNo.startsWith('hk')) {
            // this.src = 'http://47.92.248.136:8090/openapi/demo/mpv/mpv.html'
            this.haikang = true
          }
        } else {
          if (deviceNo.startsWith('dl')) {
            // this.src = videoDirectStream
          } else if (deviceNo.startsWith('hk')) {
            // this.src = 'http://47.92.248.136:8090/openapi/demo/mpv/mpv.html'
            this.haikang = true
          }
        }
      })
    },
    backToCompany() {
      this.$router.push('/user/video')
    }
  }
}
</script>
